<template>
  <div class="app-iframe-container">
    <!-- 搜索 -->
    <el-row>
      <el-form label-suffix="：" label-width="120px" label-position="right">
        <el-row>
          <el-col :span="6">
            <el-form-item label="名称">
              <el-input v-model="queryParam.name"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="类型">
              <el-select v-model="queryParam.type">
                <el-option v-for="item in enums.dbTypeEnum" :key="item.value" :label="item.text" :value="item.value"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="创建时间">
              <el-date-picker
                v-model="form.addDateRange"
                type="daterange"
                start-placeholder="开始日期"
                value-format="yyyy-MM-dd"
                end-placeholder="结束日期" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="修改时间">
              <el-date-picker
                v-model="form.editDataRange"
                type="daterange"
                start-placeholder="开始日期"
                value-format="yyyy-MM-dd"
                end-placeholder="结束日期" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" el-col style="text-align: center;">
            <el-button type="warning" size="small" icon="el-icon-search" @click="research">查询</el-button>
          </el-col>
        </el-row>

      </el-form>
    </el-row>
    <!-- /搜索 -->
    <!-- 操作按钮-->
    <el-row >
      <el-col :span="24">
        <el-button type="primary" @click="toAdd()">添加</el-button>
        <el-button :disabled="!editButtonValid" type="primary" @click="toEdit()">修改</el-button>
        <el-button :disabled="!historyButtonValid" type="primary" @click="toHistory()">历史记录</el-button>
      </el-col>
    </el-row>
    <!-- /操作按钮 -->
    <!-- 表格内容 -->
    <el-row>
      <el-col :span="24">
        <el-table
          v-loading="listLoading"
          :data="data"
          border
          fit
          highlight-current-row
          style="width: 100%;">
          <el-table-column align="center" width="65" >
            <template slot-scope="scope">
              <el-radio v-model="currentRow" :label="scope.$index"><i/></el-radio>
            </template>
          </el-table-column>
          <el-table-column label="名称">
            <template slot-scope="scope">
              <a style="color:#3399FF;cursor: pointer;text-decoration:underline;" @click="toDetail(scope.row.id)">{{ scope.row.name }}</a>
            </template>
          </el-table-column>
          <el-table-column label="类型" >
            <template slot-scope="scope">
              {{ scope.row.dbType | dictFilter(enums.dbTypeEnum) }}
            </template>
          </el-table-column>
          <el-table-column :show-overflow-tooltip="true" label="创建时间" >
            <template slot-scope="scope">
              {{ scope.row.addDate | parseDate }}
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <!-- /表格内容 -->
    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination v-show="queryParam.total>0" :current-page="queryParam.current" :page-sizes="[10,20,30, 50]" :page-size="queryParam.size" :total="queryParam.total" background layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
    </div>
    <!-- /分页 -->
  </div>
</template>

<script>
import databaseApi from '@/api/dbms/database'
import dbTypeEnum from '@/enums/dbms/dbTypeEnum'

export default {
  name: 'DbmsDatabaseList',
  data() {
    return {
      listLoading: false,
      currentRow: '',
      queryParam: {
        current: 1,
        size: 10,
        total: 0,
        name: '',
        type: null,
        addDateBegin: '',
        addDateEnd: '',
        editDateBegin: '',
        editDateEnd: ''
      },
      form: {
        addDateRange: '',
        editDataRange: ''
      },
      enums: {
        dbTypeEnum
      },
      data: []
    }
  },
  computed: {
    // 修改按钮是否可用
    editButtonValid() {
      if (this.currentRow === '' || this.currentRow === undefined || this.currentRow == null) {
        return false
      }
      return true
    },
    // 历史记录按钮是否可用
    historyButtonValid() {
      if (this.currentRow === '' || this.currentRow === undefined || this.currentRow == null) {
        return false
      }
      return true
    },
    // 返回当前列的数据
    currentData() {
      if (this.currentRow === '' || this.currentRow === undefined || this.currentRow == null) {
        return {}
      }
      return this.data[this.currentRow]
    }
  },
  mounted() {
    this.search()
  },
  methods: {
    // 处理每页大小改变
    handleSizeChange(val) {
      this.queryParam.size = val
      this.search()
    },
    // 处理页数改变
    handleCurrentChange(val) {
      this.queryParam.current = val
      this.search()
    },
    // 列表
    search() {
      if (this.form.addDateRange) {
        this.queryParam.addDateBegin = this.form.addDateRange[0]
        this.queryParam.addDateEnd = this.form.addDateRange[1]
      } else {
        this.queryParam.addDateBegin = ''
        this.queryParam.addDateEnd = ''
      }
      if (this.form.editDataRange) {
        this.queryParam.editDateBegin = this.form.editDataRange[0]
        this.queryParam.editDateEnd = this.form.editDataRange[1]
      } else {
        this.queryParam.editDateBegin = ''
        this.queryParam.editDateEnd = ''
      }
      this.listLoading = true
      databaseApi.page(this.queryParam).then(response => {
        if (response.data.code === 200) {
          var responseData = response.data.data
          this.data = responseData.records
          this.queryParam.current = responseData.current
          this.queryParam.total = responseData.total
          this.currentRow = ''
        } else {
          this.$message.error(response.data.msg)
        }
        this.listLoading = false
      })
    },
    // 重置分页条件，发起查询
    research() {
      console.warn('research')
      this.queryParam.current = 1
      this.search()
    },
    // 详情
    toDetail(id) {
      this.callNewPage(`/dbms/database/detail/${id}`)
    },
    // 添加
    toAdd() {
      this.callNewPage(`/dbms/database/add`, 'research')
    },
    // 修改
    toEdit() {
      const id = this.currentData['id']
      this.callNewPage(`/dbms/database/edit/${id}`, 'research')
    },
    // 历史记录
    toHistory() {
      const databaseId = this.currentData['id']
      this.callNewPage(`/dbms/database/history/${databaseId}`)
    }
  }
}
</script>

<style scoped>
  .el-row {
    margin-bottom: 20px;
  }
  .danger{
    color:#F56C6C
  }
</style>
